import React from 'react';
import './index.css';



const ListItem = ({ items }) => (
    <ul>
        {items.map((item, index) => (
            <li key={index}>{item}</li>
        ))}
    </ul>
);

const Index: React.FC = () => {
    const solutionsList1 = [
        '产品生态',
        '定制设计',
        '开放平台',
        '花瓣素材',
        '咔神智能拍摄',
        '欢乐逛',
        '奶牛快传',
        '启屏'
    ];

    const solutionsList2 = [
        '全链路管理',
        '创意供给',
        '内容生产',
        '资产管理',
        '营销应用',
        '效果监测',
        '私有部署'
    ];

    const industrySolutions = [
        '行业解决方案',
        '金融行业',
        '零售行业',
        '科技行业',
        '汽车行业',
        '服饰行业',
        '家电行业',
        '教培行业',
        '融媒体行业'
    ];

    const scenarioSolutions = [
        '场景解决方案',
        '品牌建设',
        '企业宣传',
        '私域营销',
        '电商投放',
        '门店管理',
        '设计提效',
        '运营赋能',
        '资产同步'
    ];

    const aboutUsList = [
        '了解包图',
        '关于包图',
        '帮助中心'
    ];

    const additionalLinks = [
        '关于包图',
        '多人协作',
        '加入我们',
        '用户协议',
        '隐私策略',
        '授权协议',
        '帮助中心',
        '功能介绍',
        '最新文章',
        '意见反馈'
    ];

    return (
        <div className='footer'>
            <div className="footerbot">
                <div className="bottop">
                    <div className="botTopLeft">
                        <div className="title">
                            <h3>稿定</h3>
                            <span>|</span>
                            <p>视觉内容 <br /> 创新方案</p>
                        </div>
                        <p className='look'>关注我们，了解更多资讯</p>
                        <div className="imgeg">
                            <dl>
                                <dt><img src='https://st0.dancf.com/market-operations/market/side/1699674449788.png' alt="公众号" /></dt>
                                <dd>公众号</dd>
                            </dl>
                            <dl>
                                <dt><img src="https://s.ibaotu.com/ibaotu/img/index/img_bottom_enter.png" alt="微信扫码咨询" /></dt>
                                <dd>微信扫码咨询</dd>
                            </dl>
                        </div>
                    </div>
                    <div className="botTopRight">
                        <ListItem items={solutionsList1} />
                        <ListItem items={solutionsList2} />
                        <ListItem items={industrySolutions} />
                        <ListItem items={scenarioSolutions} />
                        <ListItem items={aboutUsList} />
                    </div>
                </div>
                <div className="botbot">
                    <ListItem items={additionalLinks} />
                </div>
            </div>
        </div>
    );
};

export default Index;